<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>后台登录</title>
<meta name="author" content="DeathGhost" />
<link rel="stylesheet" type="text/css" href="{$staticAdmin}css/style.css" />
<style>
body{height:100%;background:#16a085;overflow:hidden;}
canvas{z-index:-1;position:absolute;}
</style>
<script src="{$staticAdmin}js/jquery.js"></script>
<script src="{$staticAdmin}js/verificationNumbers.js"></script>
<script src="{$staticAdmin}js/Particleground.js"></script>

 <!--调用jquery的ajax-->
<!-- <script src="{$staticAdmin}js/jquery-1.11.3.min.js"></script>-->

<script>
$(document).ready(function() {
  //粒子背景特效
  $('body').particleground({
    dotColor: '#5cbdaa',
    lineColor: '#5cbdaa'
  });
  //验证码
  createCode();
  //测试提交，对接程序删除即可
  /*$(".submit_btn").click(function(){
	  location.href="index.html";
	  });*/



});
</script>
</head>
<body>
<dl class="admin_login">
 <dt>
  <strong>商城后台管理系统</strong>
  <em>Shop Management System</em>
 </dt>
 <dd class="user_icon">
       <!--用户名-->
  <input type="text" placeholder="账号" class="login_txtbx" name="username"/>
 </dd>
 <dd class="pwd_icon">
       <!--密码-->
  <input type="password" placeholder="密码" class="login_txtbx" name="password"/><span></span>
 </dd>
 <dd class="val_icon">
  <div class="checkcode">
       <!--验证码-->
    <input type="text" id="J_codetext" placeholder="验证码" maxlength="4" class="login_txtbx" name="code">
    <canvas class="J_codeimg" id="myCanvas" onclick="createCode()">对不起，您的浏览器不支持canvas，请下载最新版浏览器!</canvas>
  </div>
  <input type="button" value="验证码核验" class="ver_btn" onClick="validate();">
 </dd>
 <dd>
  <input type="button" value="立即登录" class="submit_btn"/>
 </dd>
 <dd>
  <p>© 2015-2016 DeathGhost 版权所有</p>
  <p>陕B2-20080224-1</p>
 </dd>
</dl>
</body>
</html>
<script>
    //这是自己的登录js
    /*************   自己的代码   *******************************/

    $(function () {

        //标记位
    var flag = false;
    var fName = false;

    //用户名的失去焦点事件
    $('[name=username]').blur(function () {

        //获取用户名的值, 动用正则,排除输入空字符符号
        var $oName = $('[name=username]').val().replace(/(^\s*)|(\s*$)/g, "");

        /*alert($oName);
        alert($oName.length);*/


        //判断用户名是否为空
        if ($oName.length ==0) {
           // $('span').eq(0).html('用户名不得为空').css('color','red');
            alert('用户名不得为空');
            fName = false;
            return false;
        }

        //判断用户名长度不超过12,汉字不超过4个, 注意js中的一个汉字占用1个字节,php中一个汉字占3个字节
        //利用正则判断汉字
        if($oName.match( /^[\u4E00-\u9FA5]{1,}$/)){
            //alert('这是汉字');
            if ($oName.length  > 4 || $oName.length < 1) {
                $('span').eq(0).html('用户名应为 1~4 个汉字').css('color','red');
                fName = false;
                return false;
            }

        } else {
            //alert('这不是汉字');
            if ($oName.length > 12 || $oName.length < 3) {
                $('span').eq(0).html('用户名应为 3~12 位字符串').css('color','red');
                fName = false;
                return false;
            }

        }
        fName = true;
        console.log(fName);
        //标记位为true才能向后台传输数据
        if (fName) {

            //ajax传输
            $.post('admin/user/username',{username:$oName},success,'json');
        }


    });


    //密码失去焦点事件
    $('[name=password]').blur(function () {

        //获取密码值
        var $oPwd = $('[name=password]').val().replace(/(^\s*)|(\s*$)/g, "");


    });

    //验证码失去焦点事件
    $('[name=code]').blur(function () {

        //获取验证码值
        var $oCode = $('[name=code]').val().replace(/(^\s*)|(\s*$)/g, "");
    });

    /*$(".submit_btn").click(function(){
  location.href="index.html";
  });*/


    //处理后台数据的回调函数
    function success(data) {

        console.log(data);

        switch (data.state) {
            //用户名
            case 1:
                $('span').eq(0).html(data.tip).css('color','red');  //已存在数据库
                break;
            case 2:
                $('span').eq(0).html(data.tip).css('color','red');  //已存在数据库
                break;

            //密码
            case -2:
                $('span').eq(1).html(data.tip).css('color','red');  //密码错误
                break;

            //验证码
            case 3:
                $('span').eq(2).html(data.tip).css('color','red');    //验证码错误
                break;

            //登录
            case 4:
                alert(data.tip);    //登录失败
                break;
            case 5:
                alert(data.tip);    //登录成功
                break;

        }

    }

     });





</script>
